"use client"

import { ChevronDown, LifeBuoy, Send } from "lucide-react"

import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
} from "~/registry/miami/ui/collapsible"
import {
   Sidebar,
   SidebarContent,
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
} from "~/registry/miami/ui/sidebar"

export default function AppSidebar() {
   return (
      <SidebarProvider>
         <Sidebar>
            <SidebarContent>
               <Collapsible defaultOpen className="group/collapsible">
                  <SidebarGroup>
                     <SidebarGroupLabel
                        asChild
                        className="text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                     >
                        <CollapsibleTrigger>
                           Help
                           <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
                        </CollapsibleTrigger>
                     </SidebarGroupLabel>
                     <CollapsibleContent>
                        <SidebarGroupContent>
                           <SidebarMenu>
                              <SidebarMenuItem>
                                 <SidebarMenuButton>
                                    <LifeBuoy />
                                    Support
                                 </SidebarMenuButton>
                              </SidebarMenuItem>
                              <SidebarMenuItem>
                                 <SidebarMenuButton>
                                    <Send />
                                    Feedback
                                 </SidebarMenuButton>
                              </SidebarMenuItem>
                           </SidebarMenu>
                        </SidebarGroupContent>
                     </CollapsibleContent>
                  </SidebarGroup>
               </Collapsible>
            </SidebarContent>
         </Sidebar>
      </SidebarProvider>
   )
}
